    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: #f0f0f0;
        background-image: url("../img/timg.jpg") ;
        background-size:cover 
    }
    
    #videos {
        position: absolute;
        left: 550px;
        top: 0;
        bottom: 0;
        right: 0;
        width :1080px;
        height: 400px
    }
    
    #videos video {
        display: inline-block;
        width: 350px;
    }
    
    #chat {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 20px;
        width: 500px;
        margin: 10px 20px 100px 10px;
        border: 1px solid #D1EEEE;
        background-color: #ffffff;
        min-width: 300px
    }
    
    #chat .msgs_title {
        text-align: center;
        font-size: 25px;
        border-bottom: 1px solid #c6d8f2;
    }
    
    #chat .msgs_sender {
        background-color: #f6f9fa;
        border-top: 1px solid #edf2f9;
        padding: 12px 16px;
        height: 160px;
        position: relative
    }
    
    #chat .fileIpt {
        position: absolute;
        left: 0;
        width: 80%;
        bottom: -10px;
    }
    #chat .sendBtn {
        position: absolute;
        border-radius: 4px;
        border: 1px solid #008cb2;
        color: #fff;
        background-color: #00a1d6;
    }

    #sendData{
        right: 30px;
        bottom: 38px;
        width: 70px;

    }

    #sendFileBtn {
        right: 30px;
        bottom: 8px;
        width: 70px;
    }
    #chat .msgIpt {
        position: relative;
        margin-bottom: 24px;
        border: 1px solid skyblue;
        width: 97%;
        resize: none 
    }

    #chat .fileIpt  {
        padding: 5%;
    }
    
    #chat .msgs {
        height: 660px;
        overflow: auto;
        padding: 16px
    }

    #chat .msgs .chat_msg{
        position: relative;
        margin-bottom: 24px
    }

    #chat .msgs .chat_msg img {
        position: absolute;
        display: inline-block;
        width: 48px;
        height: 48px;
        top: 0;
        border-radius: 50%
    }
    
    #chat .msgs  .chat_msg .msgarrow {
        display: inline-block;
        position: absolute;
        top: 13px;
        width: 12px;
        height: 12px
    }
    
    #chat .msgs .chat_msg .msgtext{
        display: inline-block;
        border-radius: 8px;
        padding: 12px;
        max-width: 325px;
        word-wrap: break-word;
        word-break: break-all
    }

    #chat .msgs .my_msg .chat_msg img {
        right:0
    }
    
    #chat .msgs .my_msg .chat_msg {
        text-align: right
    }

    #chat .msgs .my_msg .chat_msg .msgarrow {
        background: url('../img/iconmsg1.png')  no-repeat;
        background-size: 12px 12px;
        right: 50px;
    }

    #chat .msgs .my_msg .chat_msg .msgtext {
        text-align: left;
        margin-right: 58px;
        color: #fff;
        background-color: #6db3d9
    }
    


    #chat .msgs .other_msg .chat_msg img {
        left:0
    }

    #chat .msgs .other_msg .chat_msg .msgtext {
        text-align: left;
        vertical-align: top;
        margin-left: 58px;
        background-color: #f6f9fa;
    }

    #chat .msgs .other_msg .chat_msg .msgarrow {
        background: url('../img/iconmsg.png')  no-repeat;
        background-size: 12px 12px;
        left: 50px;
    }


    #files {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 20%;
    }
    
    #files .name {}
    
    #files .percent {
        font-weight: bold;
        text-decoration: none
    }
    
    #btnm {
        height: 20%;
        width: 20%;
    }